<template>
  <div>
    <category-nav-bar/>
    <div class="category_flex">
      <!--  菜单详情      -->
      <div style="width: 20%;">
        <scroll ref="scroll" class="content">
          <category-menu
            @getSubcategory="getSubcategorys"
            :menu_list="category_list"/>
        </scroll>
      </div>
      <category-sort
        class="right"
        :sort_list="subcategory"/>

    </div>


  </div>
</template>

<script>
  import Scroll from "components/common/scroll/Scroll";
  import {getCategory, getSubcategory, getCategoryDetail} from "network/category";
  import CategoryNavBar from "./childComps/CategoryNavBar";
  import CategoryMenu from "./childComps/CategoryMenu";
  import CategorySort from "./childComps/CategorySort";
  import {POP, SELL, NEW} from "@/common/const";


  export default {
    name: "Category",
    components: {
      CategorySort,
      CategoryMenu,
      CategoryNavBar,
      Scroll
    },
    data() {
      return {
        scroll: null,

        category_list: null,
        // 分类首页数据
        subcategory: null
      }
    },
    created() {
      getCategory().then(res => {
        this.category_list = res.data.category.list
        this.getSubcategorys(this.category_list[0].miniWallkey, this.category_list[0].maitKey)

      }, err => {
        console.log(err);
      })
    },

    methods: {
      // 分类的获取的对象
      getSubcategorys(miniWallkey, maitKey) {
        getSubcategory(maitKey).then(res => {
          this.subcategory = res.data
          this._getCategoryDetail(POP, miniWallkey)
          this._getCategoryDetail(SELL, miniWallkey)
          this._getCategoryDetail(NEW, miniWallkey)
        }, err => {
          console.log(err);
        })
      },
      _getCategoryDetail(type, miniWallkey) {
        getCategoryDetail(miniWallkey, type).then(res => {
          this.subcategory[type] = res
          this.subcategory = {...this.subcategory}
        })

      },

    }
  }
</script>

<style scoped>
  .category_flex {
    display: flex;
  }

  .content {
    position: absolute;
    overflow: hidden;
    top: 44px;
    bottom: 49px;
    width: 20%;
    left: 0;
    right: 0;
  }

  .right {
    flex: 1;
  }
</style>
